<template>
  <div class="recommend">
    <ScrollView>
      <div>
        <Banner :banners="banners"></Banner>
        <keep-alive include="Personalized">
          <Personalized :personalized="personalized" :title="'推荐歌单'" @select ="fatherSelectItem" :type="'personalized'"></Personalized>
        </keep-alive>
        <Personalized :personalized="albums" :title="'最新专辑'" @select ="fatherSelectItem" :type="'albums'"></Personalized>
        <SongList :songs="songs"></SongList>
      </div>
    </ScrollView>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import {getBanner,getPersonalized ,getNewAlbum,getNewSong} from '../api/index'
import Banner from '../components/Recommend/Banner.vue'
import Personalized from '../components/Recommend/Personalized.vue'
import SongList from '../components/Recommend/SongList.vue'
import ScrollView from '../components/ScrollView.vue'
import MetaInfo from '../../vue-meta-info'

export default {
  name:"Recommend",
  metaInfo: MetaInfo.recommend,
  data(){
    return{
      banners:[],
      personalized:[],
      albums:[],
      songs:[]
    }
  },
  methods:{
    //路由跳转
    //子组件调用并传参 因为子组件能拿到对应的id和type
    //点击子组件歌单或专辑时 实现跳转到对应歌单详情
    fatherSelectItem(id,type){
      //编程式的导航 this.$router.push
      this.$router.push(
        {
          path:`/Recommend/Detail/${id}/${type}`,
        }
      )
    }
  },
  components:{
    Banner,
    Personalized,
    SongList,
    ScrollView
  },
  created(){
    //获取滚动banner
    getBanner()
      .then((data)=>{
        this.banners = data.banners;
      })
      .catch((err)=>{
        console.log(err);
      });
    //获取推荐歌单
    getPersonalized()
      .then((data)=>{
        this.personalized = data.result;
      })
      .catch((err)=>{
        console.log(err);
      })
      //最新专辑
    getNewAlbum()
      .then((data)=>{
        this.albums = data.albums.splice(0,6);
      })
      .catch((err)=>{
        console.log(err);
      })
      //最新音乐
    getNewSong()
      .then((data)=>{
        let list=[];
        //拼凑最新音乐需要的数据
        data.result.forEach(value => {
          let obj={};
          obj.id=value.id;
          obj.name=value.name;
          obj.picUrl = value.song.album.picUrl;
          //拼凑多个歌手
          let singer='';
          for (let i = 0; i < value.song['artists'].length; i++) {
            if (i === 0) {
              singer = value.song['artists'][i].name
            } else {
              singer += '-' + value.song['artists'][i].name
            }
          }
          obj.singer = singer
          list.push(obj)
        });
        this.songs = list;
      })
      .catch((err)=>{
        console.log(err);
      })
      
  }
}
</script>

<style scoped lang="scss"> 
.recommend{
  position:fixed;
  top: 184px;
  left: 0;
  bottom: 0;
  right: 0;
  //拖动时不覆盖头部 
  overflow:hidden;
}
.v-enter,.v-leave-to{
  transform: translateX(100%);
}
.v-enter-to,.v-leave{
  transform: translateX(0%);
}
.v-enter-active,.v-leave-active{
  transition: 0.8s;
}

</style>